<template>
  <div class="form-design-container">
    <h5ve-form-design ref="formDesign" :options="info.options"/>
    <div class="export-form" @click="design.visible = true">
      <el-tooltip
        effect="dark" content="导入Excel" placement="bottom">
        <span class="el-icon-tickets"/>
      </el-tooltip>
    </div>
    <!--导入表单-->
    <el-dialog
      title="导入表单数据"
      width="500px"
      :close-on-click-modal="false"
      :append-to-body="true"
      :visible.sync="design.visible">
      <import-file
        :form="design.form"
        @exportTemplate="exportTemplate"
        @close="closeImportForm"/>
    </el-dialog>
  </div>
</template>

<script>
import importFile from "@/views/toolkit/form/importFile";
/*import {exportLocalFile} from "@/views/toolkit/dynamicForm/utils";*/
import {fieldsTemplateAnalysis} from "@/api/toolkit/form";
import defaultFrom from "@/views/toolkit/form/defaultFrom";
import {getColumnField} from "@/utils";
import fields from "@/views/toolkit/form/fields";
import  {getToken} from "@/utils/auth";

export default {
  name: "FormDesign",
  components: {
    importFile
  },
  watch: {
    "info.column": {
      deep: true,
      immediate: true,
      handler() {
        const column = this.info.column;
        let sum = 0;
        column.forEach(item => {
          sum += item.dataLength ? Number(item.dataLength) : 0;
        })
        if (sum > 8060) {
          return this.$notify.error("表单数据长度总和大于8060，当前长度为" + sum);
        }
        this.$set(this.info.options, "column", column)
      }
    }
  },
  props: {
    info: {
      type: Object,
      default() {
        return {
          options: {}
        }
      }
    }
  },
  data() {
    return {
      design: {
        visible: false,
        form: {
          action: fieldsTemplateAnalysis(),
          headers: {
            "h5ve": getToken()
          },
          accept: ".xlsx",
          limit: 1
        }
      }
    }
  },
  methods: {
    /**导出模板*/
    exportTemplate() {
      /*exportLocalFile({
        url: '/template.xlsx',
        suffix: ".xlsx",
        fileName: "模板"
      });*/
    },
    /**关闭表单数据导入*/
    closeImportForm(response) {
      if (!response.code) {
        let column = [];
        let fieldList = [];
        JSON.parse(JSON.stringify(fields)).forEach(item => {
          fieldList.push(...item.list);
        })
        response.data.forEach(option => {
          try {
            let field = fieldList.find(item => item.type === option.type);
            let {type, fieldName} = option;
            let obj = JSON.parse(JSON.stringify(field))
            obj.type = type;
            obj.label = fieldName;
            column.push(obj);
          } catch (e) {
          }
        })
        column = getColumnField(column);
        const form = defaultFrom.data;
        form.column = column;
        this.info.options = form;
        this.$notify.success("已导入");
        this.$emit("export", form);
        this.design.visible = false;
      } else if (response.code) {
        this.$notify.warning("导入表单失败");
      } else {
        this.design.visible = false;
      }
    }
  }
}
</script>

<style scoped lang="scss">
.form-design-container {
  height: calc(100vh - 45px);
  ::v-deep {
    .el-collapse {
      border-top: 0;
    }
  }
  .export-form {
    position: fixed;
    top: 10px;
    right: 252px;
    padding: 4px 12px;
    font-size: 18px;
    background-color: #e3efff;
    color: #409eff;
    border-radius: 3px;
    cursor: pointer;
  }
}
</style>
